<template>
	<view>
	<scroll-view class="container" scroll-y style="margin:auto;width:100%;height:700px;">
		
		<swiper autoplay="true" indicator-dots="true" indicator-active-color="#ffffff"
		class="swiper" >
			  <swiper-item v-for="(item,index) in imgUrls" :key="index">
				  <image :src="item.img_url"  />
			  </swiper-item>
		</swiper>
		
		<view class="notify-bar flex-wrap flex-direction-row">
			<image src="../../static/my/xiaoxitishi.png"></image>
			<view class="text">关于易地扶贫项目的新通知!</view>
		</view>
		<!-- 
			1、首页展示社区的轮播图片
			2、首页展示社区的最新通知
			3、展示近一月的工作量(新增了多少条数据，更新了多少条数据，柱状图)
			4、展示网格员管理的户信息以及企业信息情况（表格）
			5、
		-->
		<view class="container">
			<label style="font-size:32rpx;color:#666;">您好，欢迎来到雷山社区信息采集平台</label>
		</view>
		
		<view class="container" style="margin-top:10px;">
			<view class = "analyze-button-box">
				<view id="byFamily" @tap="changeTab" :class="['not-selected',{selected:infoTab==='family'}]"
				class="analyze-button-text left-r">户信息</view>
				<view id="byCompany" @tap="changeTab" :class="['not-selected',{selected:infoTab==='company'}]"
				class="analyze-button-text  right-r">企业信息</view>
			</view>
			<view v-show="infoTab=='family'" style="margin-top:20px;">
				<view class="table-sd">				
					<view class="row">
						<view class="td"><label>所辖区域：</label></view>
						<view class="td"><label>龙头社区</label></view>
						<view class="td"><label>所辖户数：</label></view>
						<view class="td-last"><label>200</label></view>
					</view>
					<view class="row-last">
						<view class="td"><label>已采集数：</label></view>
						<view class="td"><label>{{sensor.L10}}</label></view>
						<view class="td"><label>待采集数：</label></view>
						<view class="td-last"><label>{{sensor.L95}}</label></view>
					</view>		
				</view>
			</view>
			<view v-show="infoTab=='company'" style="margin-top:20px;">
				<view class="table-sd">				
					<view class="row">
						<view class="td"><label>所辖区域：</label></view>
						<view class="td"><label>龙头社区</label></view>
						<view class="td"><label>企业数：</label></view>
						<view class="td-last"><label>200</label></view>
					</view>
					<view class="row-last">
						<view class="td"><label>已采集数：</label></view>
						<view class="td"><label>{{sensor.L10}}</label></view>
						<view class="td"><label>待采集数：</label></view>
						<view class="td-last"><label>{{sensor.L95}}</label></view>
					</view>		
				</view>
			</view>
		</view>
			
		
		<view class="container" style="margin-top:20px;height:460upx;">			
			<event-legend :titleRed="red" :titleBlue="blue"></event-legend>
			<canvas style="margin-left:0px;" canvas-id="canvasLineA" 
				id="canvasLineA" @touchstart="touchLineA"></canvas>	
		</view>
		
		<view class="container" style="margin-top:10px;">
			<view style="border-bottom: 1px solid #f7f7f7;width:100%;">
				<label style="font-weight:bold;font-size:14px;line-height:30px;">工作记录</label>
			</view>
			<view class="item" style="font-size:13px;line-height:36px;">				
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
				<view style="border-bottom:1px solid #f7f7f7;"><label>2021年11月1日新增了一条信息</label></view>
			</view>
		</view>
			
		<view style="margin-top:60px;">
				  <image class="logo" src="../../static/cgt.png"></image>
				  <view class="support">长沙民政学院提供技术支持</view>
				</view>
	</scroll-view>
	
</view>
</template>

<script>
	import uCharts from '../../static/u-charts/u-charts/u-charts.js';
	import eventLegend from '../../common/eventLegend.vue';
	import common from '../../common/common.js'
	const serverAddr = common.serverAddr	
	var canvaLineA=null
	export default {
		data() {
			return {
				title: "近24小时",
				red: "本月新增量",
				blue: "本月更新量",
				infoTab: "family",
				sensor:{L5:10,L10:20,L50:30,L90:11,L95:22},
				  postUp: '27',
				    postDown: '53',
				    imgUrls: [
						{img_url: "http://www.leishan.gov.cn/syqt/banner/images/P020191230542169425864.jpg"},
						{img_url: "http://www.leishan.gov.cn/syqt/banner/images/P020191230542227821529.jpg"},
					],
				    middle1: serverAddr+"/cgt/front/middle1.png?time="+Date.parse(new Date()),
					middle2: serverAddr+"/cgt/front/middle2.png?time="+Date.parse(new Date()),
					middle3: serverAddr+"/cgt/front/middle3.png?time="+Date.parse(new Date()),
				    categorys: [
				      {imageURL: serverAddr+ '/cgt/vagetable.jpg', text:'蔬菜水果', url:'0'},
				    {imageURL: serverAddr+ '/cgt/meat.jpg', text:'鲜肉禽类', url:'1'},
				    {imageURL: serverAddr+ '/cgt/oil.jpg', text:'米面粮油', url:'2'},
				    {imageURL: serverAddr+ '/cgt/ham.jpg', text:'方便速食', url:'3'}
				  ],				  
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				  chartData:{						
					  categories:['1月','2月','3月'],
					  series:[
							{
								name:"new",
								data:[12,15,10],
								color:'#C23531'
							},
							{
								name:"update",
								data:[2,15,10],
								color:'#2F4554'
							},
						]
				  }
			}
		},
		components:{
			eventLegend,
		},
		onLoad() {
			
			let that = this;			
			
			this.cWidth = uni.upx2px(690)
			this.cHeight = uni.upx2px(320)	
			this.showLineA("canvasLineA", that.chartData);
		},
		methods: {
			changeTab(e){
				if(e.currentTarget.id == 'byFamily'){
					this.infoTab = "family";
				}else{
					this.infoTab = "company";
				}
			},
			addCart: function(unit, id){
				let userid = uni.getStorageSync('userid')
				let data = {
					unit: unit,
					customerId: userid,
					productId: id,
					number: 1
				}
				this.$uniApi.addItemToCart(data)
			},
			
			showLineA(canvasId, chartData) {
				var _self = this;
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 10,
					legend: { show: false },
					dataLabel: false,
					dataPointShape: false,
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						axisLine: false,
						labelCount: 4,
					},
					yAxis: {		
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 5,
						splitNumber: 5,
						data: [{min:2,max:20,title:'%        ',axisLine: false,}],
						showTitle: true
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
				});
			}, //折线
									
			touchLineA(e) {  // 点击折线
			// console.log(e)
				let that = this
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						console.log(item)
						console.log(category)
						if(item.name=="new"){
							return category + '新增数据' + item.data+"条";
						}
						return category + '更新数据' + item.data+"条";
						
						
						/* if(item.name=='title'){
							var day = that.firstTime > category ? that.today : that.yestoday
							var time = that.isBlue ? day+' '+category : category
							return time
						}else{
							return item.name + ': ' + item.data+'个  '
						} */
					}
				});
			}			
			
		}
	}
</script>

<style>
@import url("index.css");
.charts {
		width: 100%;
		height: 460upx;
		background-color: #ffffff;
	}
		
	/* 分区背景颜色与圆角设置 */
	view.container{
		width: 710upx; /* 750 - 20*2 - 20*2 */
		margin-bottom: 20upx;
		background-color: #FFFFFF;
		border-radius: 4px;
		padding: 20upx 20upx 20upx 20upx;
		margin:0 auto;
		height: auto;
		/* padding-bottom: 20upx; */
		/* padding-left: 15upx; */
		/* padding-right: 15upx; */
	}
	
	/* 刘昊部分使用 工点监测页和传感器监测页*/
	.container-plus{
			width: (750-64-40)upx; 
			margin:0px 20upx 20upx 20upx; 
			background-color: #FFFFFF;
			border-radius: 4px;
			padding: 38upx 32upx 40upx 32upx;
		}
	
	.analyze-button-box{
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
	}
	.analyze-button-text{
		width: 0px;
		height: 48px;
		flex: 1;
		font-size: 16px;
		text-align: center;
		font-family: Helvetica;
		line-height: 48px;
		width: 112upx;
	}
	.left-r{
		border-top-left-radius: 4px;
	}
	.right-r{
		border-top-right-radius: 4px;
	}
	.selected{
		background-color: #FFFFFF !important;
		color: #4E67FD !important;
	}
	.not-selected{
		color: #7F7F7F;
		background-color: #F9F9F9;
	}
	
	.table-sd{
			color:#666;
			text-align:center;border:1px solid #f7f7f7;font-size:28upx;margin:0 auto;width:100%;
		}
		.table-sd .row{
			border-bottom:1px solid #f7f7f7;display:flex;flex-direction:row;line-height:30px;
		}
		.table-sd .row-last{
			display:flex;flex-direction:row;line-height:30px;
		}
		.table-sd .row .td, .table-sd .row-last .td{
			border-right:1px solid #f7f7f7;flex:1;
		}
		.table-sd .row .td-last, .table-sd .row-last .td-last{
			flex:1;
		}
</style>
